<script setup>

import {ref} from "vue";
import axios from "../../util/axios.js";

const handler = defineEmits(["handler"])
const props = defineProps({
  projectName:{
    type: String,
    required: true
  },
  imageName:{
    type: String,
    required: true
  }
})

const tagData = ref([])

/**
 * 时间格式化器
 * @param row
 * @param column
 * @param cellValue
 * @param index
 * @returns {string}
 */
const timeFormatter = (row, column, cellValue, index) => {
  return cellValue.replace('T', ' ').substring(0, 19)
}

const tagsFormatter = (row, column, cellValue, index) => {
  return row.tags && row.tags.map((item) => item.name).join(", ")
}

const sizeFormatter = (row, column, cellValue, index) => {
  return (row.size / 1024 / 1024).toFixed(2) + 'MiB'
}

const changePage = (artifactName) => {
  handler("handler", "artifact", artifactName)
}

axios.get("/harbor/artifacts/list?projectName=" + props.projectName + "&imageName=" + props.imageName).then(res => {
  tagData.value = res.data
})
</script>

<template>
  <el-table :data="tagData" border class="table" style="width: 100%">
    <el-table-column prop="digest" label="Artifacts" />
    <el-table-column prop="tags" label="tags" :formatter="tagsFormatter" />
    <el-table-column prop="size" label="大小" :formatter="sizeFormatter" />
    <el-table-column prop="push_time" label="推送时间" :formatter="timeFormatter" />
    <el-table-column prop="pull_time" label="拉取时间" :formatter="timeFormatter" />
    <el-table-column prop="name" label="操作" >
      <template #default="{row}">
        <el-button type="primary" size="small" @click="changePage(row.digest)" class="project-button">
          查看Tags
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.table, .table *,
.el-table th.el-table__cell,
el-table--border, el-table--border * {
  background-color: #00364d !important;
  color: #ffffff;
  border-color: #002222 !important;
}

.el-table__inner-wrapper:before,
.el-table--fit .el-table__inner-wrapper:before {
  background-color: #00364d !important;
}

.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-bottom-color: #00364d !important;
}

.project-button * {
  color: #4aaed9 !important;
}
</style>